<template>
  <div id="v-mask">
    <el-dialog
    :title="maskTitle"
    :visible.sync="showMask"
    :width="maskWidth"
    :before-close="handleClose"
    :close-on-click-modal='false'
    :close-on-press-escape='false'
    :modal-append-to-body='true'
    center
    >
    <div class="content beyond-details" v-if="maskData.beyondDetails">
      <div class="row clearfix">
        <div class="row-item clearfix fl" v-for="item in maskData.beyondDetailsList" :key="item.text">
          <span class="row-item-title fl">
            {{item.text}}：
          </span>
          <span class="border-line beyond-hiding fl">
            {{item.value}}
          </span>
        </div>
      </div>
    </div>


    <div class="content generate-work-order quality-handle business-processing" v-if="maskData.recordDetails">
      <div class="row clearfix row-processing-records">
        <div class="row-item clearfix fl">
          <span class="row-item-title fl">
            客户姓名：
          </span>
          <span class="fl span-input">
            {{maskData.customerName}}
          </span>
        </div>
        <div class="row-item clearfix fl">
          <span class="row-item-title fl">
            性别：
          </span>
          <span class="fl span-input">
            <i v-if="maskData.sex==0">男</i>
            <i v-if="maskData.sex==1">女</i>
          </span>
        </div>
        <div class="row-item clearfix fl processing-records">
          <span class="row-item-title fl">
            处理记录：
          </span>
          <span class="fl border-line">
            <p>质检处理记录：</p>
            <ul>
              <li v-for="(item,index) in maskData.qualityRecords" :key="index">{{index+1}}、{{item}}</li>
            </ul>
          </span>
        </div>
      </div>
      <div class="row clearfix">
        <div class="row-item fl clearfix">
          <span class="row-item-title fl">
            手机号码：
          </span>
          <span class="fl span-input">
            {{maskData.phoneNumber}}
          </span>
        </div>
        <div class="row-item fl clearfix">
          <span class="row-item-title fl">
            电话：
          </span>
          <span class="fl span-input">
            {{maskData.telephone}}
          </span>
        </div>
      </div>
      <div class="row clearfix">
        <div class="row-item fl clearfix">
          <span class="row-item-title fl">
            登记人工号：
          </span>
          <span class="fl span-input">
            {{maskData.orderWorkName}}
          </span>
        </div>
        <div class="row-item fl clearfix">
          <span class="row-item-title fl">
            登记人姓名：
          </span>
          <span class="fl span-input">
            {{maskData.orderWorkNumber}}
          </span>
        </div>
      </div>
      <div class="row clearfix">
        <div class="row-item fl clearfix">
          <span class="row-item-title fl">
            客户卡号：
          </span>
          <span class="fl span-input">
            {{maskData.cardNo}}
          </span>
        </div>
        <div class="row-item fl clearfix">
          <span class="row-item-title fl">
            证件号码：
          </span>
          <span class="fl span-input" style="width: 220px">
            {{maskData.personalCard}}
          </span>
        </div>
      </div>
      <div class="row clearfix">
        <div class="row-item fl clearfix">
          <span class="row-item-title fl">
            业务类型：
          </span>
          <span class="fl span-input">
            {{maskData.businessTypeValText}}
          </span>
        </div>
        <div class="row-item fl clearfix">
          <span class="row-item-title fl">
            下单时间：
          </span>
          <span class="fl span-input">
            {{maskData.orderTime}}
          </span>
        </div>
        
      </div>
      <div class="row clearfix">
        <div class="row-item fl clearfix">
          <span class="row-item-title fl">
            工单编号：
          </span>
          <span class="fl span-input">
            {{maskData.orderNo}}
          </span>
        </div>
        <div class="row-item fl clearfix">
          <span class="row-item-title fl">
            通话时间：
          </span>
          <span class="fl span-input" :title="maskData.callDuration">
            {{maskData.callDuration}}s
          </span>
        </div>
      </div>
      <div class="row clearfix">
        <div class="row-item fl clearfix">
          <span class="row-item-title fl" title="可办分期金额">
            可办分期金额：
          </span>
          <span class="fl span-input span-procedures">
            <el-input placeholder="请输入内容" disabled v-model="maskData.installmentAmount" @input="FnInstallmentAmounInput"  @focus="FnInstallmentAmountTips(1)" @blur="FnInstallmentAmountTips(0)"></el-input>
          </span>
        </div>
        <div class="row-item fl clearfix">
          <span class="row-item-title fl">
            分期期数：
          </span>
          <span class="fl span-input">
            <el-input placeholder="请输入内容" disabled rows="2" v-model="maskData.installmentNum"></el-input>
          </span>
        </div>
      </div>
      <div class="row clearfix">
        <div class="row-item fl clearfix">
          <span class="row-item-title fl">
            最后还款日：
          </span>
          <span class="fl span-input">
            {{maskData.finalPaymentDate}}
          </span>
        </div>
        <div class="row-item fl clearfix">
          <span class="row-item-title fl">
            做过分期：
          </span>
          <span class="fl span-input">
            {{maskData.isByStages}}
          </span>
        </div>
      </div>
      <div class="row clearfix">
        <div class="row-item fl clearfix">
          <span class="row-item-title fl">
            紧急程度：
          </span>
          <span class="fl span-input">
            <el-input placeholder="请输入内容" disabled rows="2" v-model="maskData.emergencyLevelVal"></el-input>
          </span>
        </div>
        <div class="row-item fl clearfix">
          <span class="row-item-title fl">
            质检结果：
          </span>
          <span class="fl span-input">
            <el-input placeholder="无" disabled rows="2" v-model="maskData.qualityStatus"></el-input>
          </span>
        </div>
      </div>
      <div class="row clearfix">
        <div class="row-item fl clearfix">
          <span class="row-item-title fl">
            备注：
          </span>
          <span class="fl span-input" :title="maskData.remarks">
            <el-input placeholder="请输入内容" type='textarea' disabled rows="2" v-model="maskData.remarks"></el-input>
          </span>
        </div>
        <div class="row-item fl clearfix">
          <span class="row-item-title fl">
            管理员备注：
          </span>
          <span class="fl span-input">
            <el-input placeholder="请输入管理员备注" disabled type='textarea' rows="2" v-model="maskData.adminRemark"></el-input>
          </span>
        </div>
      </div>
      <div class="row clearfix">
        <div class="row-item fl clearfix">
          <span class="row-item-title fl">
            其他备注：
          </span>
          <span class="fl span-input" :title="maskData.remarks">
            <el-input placeholder="请输入内容" type='textarea' disabled rows="2" v-model="maskData.otherRemark"></el-input>
          </span>
        </div>
      </div>
    </div>

    <div class="content 个人数据" v-if="maskData.PERSON">
      <div class='list'>
        <div class='item'>使用时间</div>
        <div class='item' v-for="(n1) in maskData.list" :key="n1.id">
          {{parseTime(n1.timeEnd)}}
        </div>
        <div class='page' v-if="maskData.total > 0">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="maskData.params.pageNum"
            :page-sizes="[1,15,50,100,200,500,1000,5000,10000,50000]"
            :page-size="maskData.params.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="maskData.total">
          </el-pagination>
        </div>
      </div>
    </div>

    <!--添加其他备注-->
    <span slot="footer" class="dialog-footer clearfix" v-if="maskData.editRemark">
      <el-button @click="FnMask({type:'cancel'})">取 消</el-button>
      <el-button type="primary" :loading="btnLoading" @click="FnMask({type:'editRemark',content:maskData})">确 定</el-button>
    </span>  
  </el-dialog>
  </div>
</template>

<script>
import Axios         from 'axios';
import { parseTime } from '@/utils';
export default {
  name: 'Vmask',
  data(){
    return {
      play: {
        index: '',
        currentFile: ''
      },
      timeStart: new Date(),
      serviceCharge:{rate:'0.005'},
      panleDown: false,
    }
  },
  props:{
    showMask:{
      type:Boolean,
      default:false
    },
    maskData:{
      type:Object,
      default:function(){
        return {}
      }
    },
    maskTitle:{
      type:String,
      default:''
    },
    maskWidth:{
      type:String,
      default:'28%'
    },
    btnLoading: {
      type: Boolean,
      default: false
    }
  },
  created(){
    
  },
  mounted(){
    // this.$refs.installmentAmount.focus(()=>{
    //   alert(1)
    // })
  },
  methods:{
    FnMask (obj) {
      this.panleDown  = false
      let timeStart   = this.timeStart
      let timeEnd     = new Date()
      if (timeEnd - timeStart >= 1000) {
        if (obj.type == 'selectLevel') {
          this.$emit('FnMask', obj)
        } else if (obj.type =='playPageNum') {
          this.$emit('FnMask',{type:obj.type,content: obj.content})  
        } else {
          this.$emit('FnMask',{type:obj.type,content:this.maskData})
        }
        this.timeStart= timeEnd
      }
      
    },
    handleSizeChange(i) {
      this.$emit('FnMask', {type: 'pageSize', content: i})
    },
    handleCurrentChange(i) {
      this.$emit('FnMask', {type: 'pageNum', content: i})
    },
    parseTime(a) {
      return parseTime(a)
    },
    handleClose(done) {
      this.panleDown  = false
      this.$emit('FnMask',{type:'cancel'})
    },
  },
  components:{

  },
  computed:{

  },
  
  watch:{
    'maskData.subordinateCatalogueList': {
      handler(nv, ov) {
        // console.log(nv)
      }, 
      deep: true
    },
    'maskData.fieldTypeVal':{
      handler:function(nv,ov) {
        nv==6?this.maskData.fieldNameBoxAddInput=true:this.maskData.fieldNameBoxAddInput=false;
      },
      deep:true
    },
    'maskData.workOrderStatusVal':{
      handler:function(nv,ov) {
        nv=='order_status_work_fail'?this.maskData.workOrderBack=true:this.maskData.workOrderBack=false;
      },
      deep:true
    },
    'maskData.installmentNum':{
      handler:function(nv,ov) {
        switch(nv) {
          case '3':
          this.serviceCharge.rate = '0.0075';
          break;
          case '6':
          this.serviceCharge.rate = '0.0056';
          break;
          case '10':
          this.serviceCharge.rate = '0.0052';
          break;
          case '12':
          this.serviceCharge.rate = '0.0048';
          break;
          case '18':
          this.serviceCharge.rate = '0.0048';
          break;
          case '24':
          this.serviceCharge.rate = '0.0050';
          break;
          default:
          this.serviceCharge.rate = '0.50';
        }
      },  
      deep:true
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang='scss' scoped>
#v-mask {
  .content {
    // max-height: 500px;
    .row {
      padding-left: 0;
      line-height: 30px;
      .row-item {
        margin-bottom: 15px;
        .span-input {
          width: 160px;
          .el-date-editor.el-input, .el-date-editor.el-input__inner {
          }
        }
      }
      .row-item-title {
        text-align: right;
        width: 75px;
        vertical-align: middle;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;  
      }
      .row-item-select {
        position: relative;
        z-index: 9999;
      }
      .span-only-show {
        display: inline-block;
        width: 160px;
        line-height: 30px;
        border:1px solid #ccc;
        height: 30px;
        border-radius:3px;
        padding-left: 10px;
      }
      .span-file {
            width: 85px;
            position: relative;
            display: inline-block;
            overflow: hidden;
            vertical-align: middle;
            height: 28px;
            cursor: pointer;
            button,input {
              cursor: pointer;
              position: absolute;
              top: 0;
              left: 0;
              width: 100%!important;
              height: 100%!important;
            }
            input {
              opacity: 0;
              border:0;
            }
      }
    }
    .row-item-headerImg {
        // line-height: 50px;
      margin-right: 15px;
      margin-top: -15px;
      img {
        width: 50px;
        height: 50px;
        border-radius:50%;
      }
    }
    &.black-life {
      .span-input {
        width: 250px !important
      }
    }
    &.audio-box {
      .item {
        span {
          box-sizing: border-box;
          display: inline-block;
          width: 20%;
          padding-right: 32px
        }
        span:nth-child(2) {
          width: 60%
        }
        span:last-child {
          text-align: right;
          color: #409EFF;
          cursor: pointer;
        }
      }
    }
  }
  .个人数据 {
    .item:first-child {
      font-size: 18px;
      color: #333;
      font-weight: bold
    }
    .item {
      padding: 4px 0;
      font-size: 16px;
      color: #999
    }
  }
  .page {
    padding-top: 20px
  }
}
</style>
